<template>
  <view class="container">
    <u-navbar :title="title" @rightClick="rightClick" placeholder rightText="筛选" bgColor="#6750F8">
      <view slot="left"></view>
      <view slot="right">
        <image src="/static/images/shuanxuan.png" style="width:40rpx;height:33rpx;"></image>
      </view>
    </u-navbar>
    <Empty v-if="empty" emptyText="空空如也"></Empty>
    <view v-else class="u-content">
      <u-loading-page :loading="loading"></u-loading-page>
      <u-list @scrolltolower="scrolltolower">
      <view class="list flex-all" v-for="item in list" :key="item.id">
        <image class="imgwrap" src="/static/images/wyf.png" mode="widthFix"></image>
        <view class="curhous flex-box">
          <view class="t1">{{item.community.name}}</view>
          <view class="t2">门牌号：<span v-if="item.building&& item.building.name">{{item.building.name}}</span> {{ item.house_number}}</view>
          <view class="t3">业主：{{item.name}}</view>
          <view class="t4">联系电话：{{item.tel}}</view>
        </view>
        <view class="goPay">
          <view class="price" @click.stop="toEdit(item.id)">查看/编辑</view>
          <view class="goPayBtn" @click.stop="toDetail(item.community_code)">缴费记录</view>
        </view>
      </view>
      <u-loadmore :nomore-text="nomoreText" line :status="!isLoading?'loadmore':'nomore'"/>
      </u-list>
    </view>
    <u-popup :show="show" @close="close" mode="right" closeable closeIconPos="top-left">
      <view class="pop">
        <view class="tit">当前小区:</view>
        <view class="curXq" @click="()=>showHouse = true">
          <u-input v-model="house" placeholder="请选择" border="none" suffixIcon="arrow-down" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
        </view>
        <view class="flex-all">
          <view class="flex-two">
            <view class="tit">楼号:</view>
            <view class="items" @click="selBuild">
              <u-input v-model="building" placeholder="请选择" border="none" suffixIcon="arrow-down" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
            </view>
          </view>

          <view class="flex-two nameOrTitle">
            <view class="tit">门牌号:</view>
            <view class="items">
              <u-input v-model="house_number" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize"  />
            </view>
          </view>
        </view>

        <view class="flex-all nameOrTitle">
          <view class="flex-two">
            <view class="tit">姓名:</view>
            <u-input v-model="name" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize"  />
          </view>

          <view class="flex-two">
            <view class="tit">电话:</view>
            <u-input v-model="tel" suffixIcon="search" placeholder="请输入" border="none" :fontSize="fontSize" />
          </view>
        </view>
        <view class="tit">时间:</view>
        <view class="flex-all curTime">
          <view @click="showTimeBegin = true"><u-input v-model="beginTime" placeholder="起始时间(精确到月)" inputAlign="center" border="none" disabled disabledColor="#f6f6f6" :fontSize="fontSize" /> </view>
          <span>——</span> 
          <view @click="showTimeOver = true">
            <u-input v-model="overTime" placeholder="截止时间" inputAlign="center" border="none" :fontSize="fontSize" disabled disabledColor="#f6f6f6" />
          </view>
        </view>
        <view class="tit">支付方式:</view>
        <view class="items">
          <text v-for="(item,index) in payType" :class="{cur:currentPay == index}" @click="selPayType(index,item.type)" :key="item.id">{{item.name}}</text>
        </view>
        <view class="footer">
          <view class="cz" @click.stop="reset">重置</view>
          <view class="sure" @click="filtering">确定筛选</view>
        </view>
      </view>
		</u-popup>
    <!-- 小区弹窗 -->
    <u-action-sheet :actions="houses" title="选择小区" :show="showHouse" @close="()=>showHouse = false" @select="sureHouse" :closeOnClickOverlay="true" :closeOnClickAction="true"></u-action-sheet>

    <!-- 楼栋 -->
    <u-action-sheet
      :show="showBuild"
      :actions="buildyLists"
      title="请选择楼栋"
      @close="showBuild = false"
      @select="buildSel"
		>
		</u-action-sheet>
    <!-- 时间选择插件 -->
    <u-datetime-picker
        :show="showTimeBegin"
        v-model="timeBegin"
        mode="date"
        closeOnClickOverlay
        @confirm="(e) =>confirmBegin(e)"
        @cancel="()=>showTimeBegin = false"
      ></u-datetime-picker>
    
     <u-datetime-picker
        :show="showTimeOver"
        v-model="timeOver"
        mode="date"
        closeOnClickOverlay
        @confirm="(e) =>confirmOver(e)"
        @cancel="()=>showTimeOver = false"
      ></u-datetime-picker>
    <Tabbar path="/pages/index/myHouse"></Tabbar>
  </view>
</template>

<script>
import UniNavBar from "@/components/uniNavbar/index.vue"
import {houseList} from '@/api/index.js'
import {communityList,buildList} from '@/api/common.js'
import Empty from "@/components/empty.vue"
export default {
  name:'myHouse',
  components:{
    UniNavBar,
    Empty
  },
  data() {
    return {
      title:'房屋管理',
      list:[],
      nomoreText:'我是有底线的',
      loading: false,
      params: {
        page: 1,
        limit: 10
      },

      house_number:'',
      name:'',
      tel:'',
      building_id:'',
      building:'',
      buildyLists:[],

      showTimeBegin:false,
      showTimeOver:false,
      showHouse:false,
      showBuild:false,
      beginTime:'',
      timeBegin:Number(new Date()),
      overTime:'',
      timeOver:Number(new Date()),
      payType:[{name:'微信',type:'wechat'},{name:'支付宝',type:'alipay'},{name:'银联支付',type:'bank'}],
      show:false,
      fontSize:'12px',
      currentPay:-1,
      houses:[],
      house:'',
      pay_type:'',
      community_code:'',
      community_id:'',
    }
  },
  onLoad() {
   this.getHouseList()
   this.getCommunity()
  },
  onPullDownRefresh(){
    uni.startPullDownRefresh();
    this.params.page = 1
    this.getHouseList()
  },
   computed: {
    isLoading() {
      return this.loading === false && this.list.length != 0
    },
    empty() {
      return this.list.length === 0 && this.loading === false
    }
  },
  onReady() {
    
  },
  methods:{
    toDetail(code) {
      uni.navigateTo({url:'/pages/pay/index?code=' + code});
    },

    filtering() {
      this.show = false
      this.params.page = 1
      this.getHouseList()
    },

     // 重置
    reset() {
      this.house = ''
      this.beginTime = ''
      this.overTime = ''
      this.community_code = ''
      this.community_id = ''
      this.building_id = ''
      this.house_number = ''
      this.building = ''
      this.name = ''
      this.tel = ''
      this.pay_type = ''
      this.currentPay = -1
    },

    selBuild() {
      if (!this.community_id) {
        return this.$util.Tips({
          title:'请先选择小区'
        })
      }
      let obj = {
        community_id:this.community_id
      }
      let params = {
        filter:JSON.stringify(obj)
      }
      buildList(params).then(res=>{
        this.buildyLists = res.data.rows
        this.showBuild = true
      })
    },

    rightClick() {
      this.show = true
    },
    close() {
      this.show = false
    },

    selPayType(index,type) {
      this.currentPay = index
      this.pay_type = type
    },

    toEdit(id) {
      uni.navigateTo({url:'/pages/index/addHouse?cid=' + id});
    },

    getCommunity() {
      communityList().then(res=>{
        this.houses = res.data.rows
      })
    },

    sureHouse(e) {
      this.house = e.name
      this.community_code = e.code
      this.community_id = e.id
    },
    buildSel(e) {
      this.building_id = e.id
      this.building = e.name
    },
    // 选择时间
    confirmBegin(e) {
      let time = this.result(e.value, e.mode)
      if (this.overTime) {
        if (this.$util.compareTime(time,this.overTime)) {
          return this.$util.Tips({
            title:'开始时间不能大于结束时间'
          },()=>{
            this.beginTime = ''
          })
        }
      }

      this.beginTime = time
      this.showTimeBegin = false
    },
    confirmOver(e) {
      let time = this.result(e.value, e.mode)
      if (this.beginTime) {
        if (this.$util.compareTime(this.beginTime,time)) {
          return this.$util.Tips({
            title:'结束时间不能小于开始时间'
          },()=>{
            this.overTime = ''
          })
        }
      }
      this.overTime = time
      this.showTimeOver = false
    },
    result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				switch (mode) {
					case 'datetime':
						return timeFormat(time, 'yyyy-mm-dd hh:MM')
					case 'date':
						return timeFormat(time, 'yyyy-mm-dd')
					case 'year-month':
						return timeFormat(time, 'yyyy-mm')
					case 'time':
						return time
					default:
						return ''
			}
		},

    // 计算返回时间
    computTime() {
      let time = ''
      if (this.beginTime && this.overTime) {
        time = this.beginTime + ' 00:00:00' +'-'+ this.overTime + ' 23:59:59'
      }

      if (this.beginTime && this.overTime=='') {
         time = this.beginTime + ' 00:00:00'
      }

      if (this.overTime && this.beginTime=='') {
         time = this.overTime + ' 23:59:59'
      }
      return time
    },


    scrolltolower() {
      this.params.page++
      this.getHouseList()
    },
    getHouseList() {
      let obj = {
        community_code:this.community_code,
        name:this.name,
        tel:this.tel,
        building_id:this.building_id,
        house_number:this.house_number,
        pay_type:this.pay_type,
        createtime:this.computTime(),
      }
      let params = {
        filter:JSON.stringify(obj),
        op:JSON.stringify({createtime:'RANGE',house_number:'like'}),
        ...this.params
      }
      this.loading = true
      houseList(params).then(res=>{
        if (this.params.page == '1') {
          this.list = res.data.rows
        } else {
          this.list = this.list.concat(res.data.rows)
        }
        this.loading = false
				uni.stopPullDownRefresh();
      }).catch(e => {
					this.loading = false
					uni.stopPullDownRefresh();
				})
    }
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width:100vw;
    height: 100vh;
    padding: 0 30rpx;
    /deep/ .u-navbar__content__title{
      color: #fff;
    }
    .u-content {
      .list {
        width:100%;
        background: #fff;
        padding:28rpx;
        margin:26rpx auto;
        border-radius: 10rpx;
        .imgwrap {
          width:70rpx;
        }
        .curhous {
          padding:0 20rpx 0 25rpx;
          .t1 {
            font-size: 32rpx;
            color: #000;
            font-weight: 600;
            margin-bottom: 20rpx;
          }
          .t3 {
            margin:10rpx 0;
          }
        }
        .goPay {
          .price {
            color: $uni-bg-color;
            margin-bottom: 30rpx;
            border:1px solid $uni-bg-color;
            padding:8rpx 10rpx;
            border-radius: 10rpx;
            min-width: 100rpx;
            text-align: center;
            font-size: 22rpx;
          }
          .goPayBtn {
            min-width: 100rpx;
            text-align: center;
            height: 56rpx;
            line-height: 56rpx;
            font-size: 22rpx;
            color: #fff;
            background: $uni-bg-color;
            border-radius: 10rpx;
          }
        }
      }
    }
    .pop {
      width:640rpx;
      height: 100%;
      padding:100rpx 20rpx 0;
      position: relative;
      .tit {
        font-size: 30rpx;
        color: #222222;
        margin:50rpx 0 20rpx;
      }
      .curXq {
        width: 330rpx;
        height: 60rpx;
        /deep/ .u-input {
          width:100%;
          height: 100%;
          padding:0 20rpx !important;
        }
      }
      .nameOrTitle {
        /deep/ .u-input {
          background: #f6f6f6 !important;
        }
      }
      .flex-two {
         /deep/ .u-input {
          width:100%;
          height: 60rpx;
          padding:0 20rpx !important;
        }
      }
      .curTime {
         view {
          /deep/ .u-input {
            width:250rpx;
            height:60rpx;
          }
         }
        span {
          display: inline-block;
          margin:0 10rpx;
        }
      }
      .items {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        text {
          display: inline-block;
          min-width: 134rpx;
          text-align: center;
          height: 60rpx;
          line-height: 60rpx;
          padding:0 20rpx;
          background: #f6f6f6;
          border-radius: 5rpx;
          color: #222;
          margin:0 20rpx 20rpx 0;
          &.cur {
            background: $uni-bg-color;
            color: #fff;
          }
        }
      }
      .footer {
        position: absolute;
        left:0;
        bottom: 0;
        width:100%;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .cz {
          width: 280rpx;
          height: 98rpx;
          background: #FFFFFF;
          color: $uni-bg-color;
          font-size: 32rpx;
        }
        .sure {
          flex:1;
          height: 98rpx;
          background: $uni-bg-color;
          color: #fff;
          font-size: 32rpx;
        }
      }
    }
  }
</style>